@charset "UTF-8";

html{
    min-width: 1000px;
}
body{
    
    background-color: rgb(21,71,122);
}

/*导航*/

.nav{
    width: 100%;
    height: 60px;
    /*background-color: #373d41;*/
    border-bottom: 1px rgba(255, 255, 255, 0.15) solid;
    color: #fff;
    text-align: center;
    line-height: 60px;
    font-size: 14px;
    overflow: hidden;
    &:hover{
        background-color: #373d41;
        transition: all 0.8s;
        border-bottom: none;
    }
    .nav_all{
        float: left;
        padding: 0 20px;
        &:hover{
            background-color: #00cede;
        }
        span{
            line-height: 60px;
        }
    }
    .nav_list{
        float: left;
        li{
            float: left;
            padding: 0 20px;
            cursor: default;
            
        }
    }
}
.noneborder{
    background-color: #373d41;
    border: none;
}
/*全部导航*/
.list{
    display: inline-block;
    position: relative;
    top: 0;
    left: 0;
    
    .list_l1{
        position: relative;
        width: 200px;
        /*height: 300px;*/
        z-index: 500;
        background-color: #272B2E;
        overflow: hidden;
        padding: 15px;
        border-right: 1px rgba(255, 255, 255, 0.15) solid;
        ul{
            padding-bottom: 15px;
            border-bottom: 1px rgba(255, 255, 255, 0.15) solid;  
        }
        li{
            margin-left: -15px;
            width: 200px;
            height: 35px;
            padding: 0 15px;
            /*margin: 10px 0;  */    
            line-height: 35px;
            color: #fff; 
            span{
                font-size: 24px;
                line-height: 25px;
                float: right;
            }
        }
        .active{
            color:#00C1DE;
        }
    }

    .list_l2{
        position: absolute;
        top: 0;
        left: 200px;
        z-index: 400;
        /*background-color: #272B2E;*/
        overflow: hidden;
        .bgstyle{
            /*position: relative;
            top: 0;
            left: 0;*/
            width: 320px;
            background-color: #303538;
            padding: 13px 15px;
            color: #fff;
            
            .bglist{
               padding-bottom: 10px;
               border-bottom: 1px rgba(255, 255, 255, 0.15) solid;
               h3{   
                a{
                    line-height: 35px;
                    color: #fff;
                    padding: 0 7px;
                    &:hover{
                    color:#00C1DE;
                  } 
                }
                 
                   
               }
               li{
               /* margin-left: -15px;*/
                width: 200px;
                height: 35px;
                padding: 0 7px;
                a{
                  line-height: 35px;
                  color: #fff;  
                }
                &:hover{
                    background-color: rgba(255, 255, 255, 0.05);
                    color:#00C1DE;
                    a{
                        color:#00C1DE;
                    }
                  } 
               }
            }
        }
        .liststyle{
            width: 200px;
            background-color: #272B2E;
           /* overflow: hidden;*/
            padding: 15px;
            li{
                cursor: pointer;
                margin-left: -15px;
                width: 200px;
                height: 35px;
                padding: 0 15px;    
                line-height: 35px;
                color: #fff; 
                span{
                    font-size: 24px;
                    line-height: 25px;
                    float: right;
                }
            }
            .active{
                color:#00C1DE;
            }
        }
    }

    .list_l3{
        position: relative;
        top: 0;
        left: 200px;
        .list_l3_left{
            width: 400px;
            background-color: #303538;
            overflow: hidden;
            padding: 15px;
            border-right: 1px rgba(255, 255, 255, 0.15) solid;
            h3{
                padding: 5px;
                color: #fff;
            }
            li{
                a{
                    display: block;
                    width: 100%;
                    padding: 5px;
                    p:first-child{
                        font-size: 12px;
                        color: #fff;
                        line-height: 20px;
                    }
                    p:last-child{
                        font-size: 12px;
                        color: #9B9EA0;
                        line-height: 20px;
                    }
                    &:hover{
                        background-color: rgba(255, 255, 255, 0.05);
                        p:first-child{
                            color:#00C1DE;
                        }
                    }
                }
               
            }
        }
        .list_l3_right{
            width: 280px;
            background-color: #272B2E;
            overflow: hidden;
            padding: 15px;
            p{
                color: #9B9EA0;
                padding-bottom: 10px;
                border-bottom: 1px rgba(255, 255, 255, 0.15) solid;
            }
            li{
                a{
                    color: #fff;
                    display: block;
                    font-size: 12px;
                    margin-top: 20px;
                    /*line-height: 20px;*/
                    &:hover{
                        color:#00C1DE;
                    }
                }
            }
        }
    }

}


/*list的vue动画*/
.list-enter-active, .list-leave-active {
    transition: all .5s;
}

 .list-enter,.list-leave-to{
     left: -200px;
 }
 .list-enter-to,.list-leave{
     left:0;
 }


 .listt-enter-active {
  animation: listt-in .5s;
}
.listt-leave-active {
  animation: listt-out .5s;
}
@keyframes listt-out{
     0% {
        left: 200px;
      }
      100% {
        left: -120px;
      }
}
@keyframes listt-in {
  0% {
    left: 0px;
  }
  100% {
    left: 200px;
  }
}


 .list3-enter-active {
  animation: list3-in .5s;
}
.list3-leave-active {
  animation: list3-out .3s;
}
@keyframes list3-out{
     0% {
        left: 0px;
      }
      100% {
        left: -600px;
      }
}
@keyframes list3-in {
  0% {
    left: -600px;
  }
  100% {
    left: 200px;
  }
}